<%--
  Created by IntelliJ IDEA.
  User: lr
  Date: 2019/6/25
  Time: 18:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>点赞</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</head>
<body>
<h1>Welcome!</h1>
<table class="table">
    <caption>商品</caption>
    <thead>
    <tr>
        <th>产品id</th>
        <th>产品名</th>
        <th>产品价格</th>
        <th>点赞</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${products}" var="pro">
        <tr>
            <th scope="row">${pro.productId}</th>
            <td>${pro.productName}</td>
            <td>${pro.productMinPrice}</td>
            <c:if test="${pro.zan == true}">
                <%--有赞--%>
                <td>
                <span class="glyphicon glyphicon-star" aria-hidden="true"
                      id="zan-1-${pro.productId}" onclick="dianZan('zan-1-${pro.productId}')"></span>
                        <%--1是登录后用户id(${user.userid}})--%>
                </td>
            </c:if>
            <c:if test="${pro.zan == false}">
                <%--没赞--%>
                <td>
                <span class="glyphicon glyphicon-star-empty" aria-hidden="true"
                      id="zan-1-${pro.productId}" onclick="dianZan('zan-1-${pro.productId}')"></span>
                        <%--1是登录后用户id(${user.userid}})--%>
                </td>
            </c:if>

        </tr>
    </c:forEach>

    </tbody>
</table>



<script>
    function dianZan(key) {

        var type = $("#"+key).attr("class");
        if (type.indexOf("empty")>0){
            /*空心,变为实心*/
            $("#"+key).attr("class","glyphicon glyphicon-star");
        } else{
            $("#"+key).attr("class","glyphicon glyphicon-star-empty");
        }
        var flag =$("#"+key).attr("class");
        $.post("${pageContext.request.contextPath}/dianzan.do",
            {"key":key,"flag":flag},
            function (res) {
                alert(res.code);
            }
        );

    }
</script>
</body>
</html>
